<template>
	<div
		class="card"
		:class="{ 'border': border }"
		:style="{ margin: margin }"
	>
		<div
			class="header"
			:style="{ padding: padding }"
			v-if="showHeader"
		>
			<slot name="header"></slot>
		</div>
		<div
			class="body"
			:style="{ padding: padding }"
		>
			<slot name="body"></slot>
		</div>
		<div
			class="footer"
			:style="{ padding: padding }"
			v-if="showFooter"
		>
			<slot name="footer"></slot>
		</div>
	</div>
</template>

<script setup lang="ts" name="Card">
import usePxTransform from "@hooks/usePxTransform.ts";


defineProps({
	border: {
		type: Boolean,
		default: true
	},
	margin: {
		type: String,
		default: usePxTransform(10)
	},
	padding: {
		type: String,
		default: usePxTransform(10)
	},
	showHeader: {
		type: Boolean,
		default: true
	},
	showFooter: {
		type: Boolean,
		default: true
	}
})
</script>

<style scoped lang="scss">
.border {
	border: 1px solid gainsboro;
}

.card {
	position: relative;
	box-sizing: border-box;
	border-radius: 6px;
	box-shadow: 0px 0px 3px 0px gainsboro;
	background-color: #ffffff;
	overflow: hidden;

	.header,
	.body,
	.footer {
		padding: 10px;
		box-sizing: border-box;
	}

	.header {
		border-bottom: 1px solid gainsboro;
	}

	.body {}

	.footer {
		border-top: 1px solid gainsboro;
	}
}
</style>